<template>
    <div class="goods-group">
        <i-card>
            <header class="goods-search">
                <div class="button-group">
                    <i-button slot="left" type="success">
                        添加分组
                    </i-button>
                </div>
                <section>
                    <i-input
                        class="input"
                        v-model="inputValue"
                        placeholder="请输入分组名称"
                        style="width: 300px">
                    </i-input>
                    <i-button type="info">搜索</i-button>
                </section>
            </header>
            <section>
                <i-table
                    border
                    :data="groupData"
                    :columns="columns">
                </i-table>
            </section>
            <footer>
                <div></div>
                <i-page
                    show-elevator
                    show-sizer
                    :total="40">
                </i-page>
            </footer>
        </i-card>
    </div>
</template>
<script>
export default {
    name: 'goods-group',
    data() {
        return {
            inputValue: '',
            groupData: [],
            columns: [
                {
                    title: '分组名称',
                    width: '40%',
                    key: 'productName'
                },
                {
                    title: '发布时间',
                    key: 'releaseTime'
                },
                {
                    title: '管理',
                    key: 'management',
                    align: 'center',
                    render: (h, params) => {
                        return (
                            <div>
                                <i-button size="small" type="error">
                                    <i-icon type="trash-a" size={14} />
                                </i-button>
                            </div>
                        )
                    }
                }
            ]
        }
    }
}
</script>
<style lang="less" scoped>
@import '~@/assets/style/theme/index';
.input {
    margin-right: 4px;
}
.goods-search {
    display: flex;
    justify-content: space-between;
}
.goods-group {
    header,
    footer {
        display: flex;
        justify-content: space-between;
    }
    header {
        padding: @gap;
        background: @table-thead-bg;
        margin-bottom: @gap;
    }
    footer {
        margin-top: @gap;
    }
}
</style>


